/**
 * @description  : 布局-页签组件
 * @descriptionDetail : 布局-页签组件
 * @copyright    : 浙江烟草
 * @author       : dw
 * @create       : 2022-12-05 10:30:56
 */
<template>
  <view>
    <view class="retail">
      <fsection :title="title.basemsg" class="pl-16"></fsection>
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
    </view>
    <view class="rdcontent">
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="6">
          <view class="msg-title">
            店铺招牌
          </view>
          <view class="msg-context">
            {{ basemsg.shopSign || "/" }}
          </view>
        </u-col>
        <u-col span="6">
          <view class="msg-title">
            经营面积（平方）
          </view>
          <view class="msg-context">
            {{ basemsg.bizArea || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" justify="space-between" align="top" class="divided-line">
        <u-col span="6">
          <view class="msg-title">
            地区类别
          </view>
          <view class="msg-context">
            {{ basemsg.areaTypeName || "/" }}
          </view>
        </u-col>
        <u-col span="6">
          <view class="msg-title">
            地缘情况
          </view>
          <view class="msg-context">
            {{ basemsg.areaTypeDetailName || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" justify="space-between" align="top" class="divided-line">
        <u-col span="6">
          <view class="msg-title">
            地理环境
          </view>
          <view class="msg-context">
            {{ basemsg.envTypeName || "/" }}
          </view>
        </u-col>
        <u-col span="6">
          <view class="msg-title">
            商圈情况
          </view>
          <view class="msg-context">
            {{ $u.dic.getDicNameByKeyCode($u.dic.DIC_KEYS.L_BUSI_TYPE,basemsg.busiType) || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="6">
          <view class="msg-title">
            场地权属
          </view>
          <view class="msg-context">
            {{ basemsg.groundOwnershipName || "/" }}
          </view>
        </u-col>
        <u-col span="6">
          <view class="msg-title">
            租赁有效期类型
          </view>
          <view class="msg-context">
            {{ $u.dic.getDicNameByKeyCode($u.dic.DIC_KEYS.L_BUSINESS_VALID_TYPE,basemsg.groundOwnershipValidType) || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-title">
            租赁（无偿使用）期
          </view>
          <view class="msg-context">
            {{ leaseTime }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-title">
            经营地址
          </view>
          <view class="msg-context">
            {{ basemsg.businessAddr || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-title">
            仓储地址
          </view>
          <view class="msg-context">
            {{ basemsg.storagePlace || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-title">
            行政区划
          </view>
          <view class="msg-context">
            {{ orgName || "/" }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-title">
            经纬度
          </view>
          <view class="msg-context">
            {{ lonLat }}
          </view>
        </u-col>
      </u-row>
      <u-row gutter="16" align="top" class="divided-line">
        <u-col span="12">
          <view class="msg-context">
            <view style="height:200px" id="container"></view>
          </view>
        </u-col>
      </u-row>
    </view>
  </view>
</template>

<script>
import fsection from "@/components/form-section.vue";
import {AMapMixin,} from '@/common/AMapMixin.js';
import commonService from '@/service/common/common.service'
export default {
  components:{
    fsection,
  },
  mixins: [AMapMixin,],
  props:{
    layoutInfo:{
      type:Function,
      default:() => {},
    },
  },
  data(){
    return{
      title:{
        basemsg:"布局信息",
      },
      basemsg:{},
      markers:[],
      lonLat:"/",
      leaseTime:"/",
      orgName:"",
    }
  },
  created(){
    this.layoutInfo().then(res => {
      if(res.success){
        this.basemsg = res.bean.licenseInfoPre;
        if(!this.$u.test.isEmpty(this.basemsg.longitude)){
          this.lonLat = this.basemsg.longitude + "," + this.basemsg.latitude;
        }
        if (this.basemsg.groundOwnership == '02' || this.basemsg.groundOwnership == '03') {
          this.leaseTime = (this.basemsg.leaseTimelimitStart || "/") + "至" + (this.basemsg.leaseTimelimitEnd || "/");
        }else{
          this.leaseTime = "/"
        }
        this.setMapInstance(this.basemsg);
        this.basemsg.regionalization &&
        commonService.findBscAreaStreetByAreaUuid({areaUuid:this.basemsg.regionalization,}).then((res) => {
          if(res.success){
            let text = '';
            let info = res.bean;
            if(info.provName){
              text += info.provName;
            }
            if(info.cityName){
              text +=  '/' + info.cityName;
            }
            if(info.countyName){
              text +=  '/' + info.countyName;
            }
            if(info.townName){
              text += '/' + info.townName;
            }
            if(info.villageName){
              text +=  '/' + info.villageName;
            }
            this.orgName = text;
          }else{
            this.$message.error(res.msg);
          }
        }).catch(err => {
          console.log(err);
        })
      }
    });
  },
  methods:{
    // 初始化地图
    initAmap() {
      let self = this;
      self.amap = new AMap.Map("container",{
        zoom: 18,
      });
      this.loadPlugin([
        'AMap.ToolBar',
      ], function(){
        self.amap.addControl(new AMap.ToolBar());
      });
    },
    setMapInstance(basemsg){
			if(!!basemsg.longitude && !!basemsg.latitude) {
				this.addMarker(basemsg.longitude, basemsg.latitude,basemsg.businessAddr);
				this.amap.setCenter([basemsg.longitude,basemsg.latitude,]);
			}
    },
    // 地图上添加点
    addMarker( longitude, latitude, text){
      let self = this;
      let markerConfig = {
        title: text,
        position: [longitude, latitude,],
        label:{
          content: text,
          offset: new AMap.Pixel(22, 1),
        },
      };
      let point = new AMap.Marker(markerConfig );
      point.setMap(self.amap); // 在地图上添加点
      this.markers.push(point);
    },
  },

}
</script>

<style lang="scss" scoped>
@import "./retailItem.scss";
</style>
